import 'package:flutter/material.dart';
import 'package:flutter_demo/model/post.dart';

class SliverDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverAppBar(
          // title: Text("NINGHAO"),
          // pinned: true, //固定 appBar 否则 上划列表 会跟着上去
          floating: true, //列表上划 appBar 会跟着上去
          expandedHeight: 178.0, //列表下拉 上面留出一部分区域
          flexibleSpace: FlexibleSpaceBar(
            title: Text(
              'Ninghao Flutter'.toUpperCase(),
              style: TextStyle(
                  fontSize: 15.0,
                  letterSpacing: 3.0,
                  fontWeight: FontWeight.w400),
            ),
            background: Image.network(
              'https://img1.baidu.com/it/u=4107987236,956710411&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
              fit: BoxFit.cover,
            ),
          ),
        ),
        SliverSafeArea(
            sliver: SliverPadding(
          padding: const EdgeInsets.all(8.0),
          sliver: SliverListDemo(),
        ))
      ],
    );
  }
}

class SliverListDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildBuilderDelegate((context, index) {
        return Padding(
          padding: EdgeInsets.only(bottom: 32.0),
          child: Material(
              borderRadius: BorderRadius.circular(12.0),
              elevation: 14.0,
              shadowColor: Colors.grey.withOpacity(0.5),
              child: Stack(
                children: [
                  AspectRatio(
                    aspectRatio: 16 / 9,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(12.0),
                      child: Image.network(
                        posts[index].imageUrl ?? '',
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  Positioned(
                      top: 32.0,
                      left: 32.0,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            posts[index].title ?? '',
                            style: const TextStyle(
                                fontSize: 20.0, color: Colors.white),
                          ),
                          Text(
                            posts[index].author ?? '',
                            style: const TextStyle(
                                fontSize: 13.0, color: Colors.white),
                          )
                        ],
                      ))
                ],
              )),
        );
      }, childCount: posts.length),
    );
  }
}

class SliverGrideDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverGrid(
      delegate: SliverChildBuilderDelegate((context, index) {
        return Container(
          child: Image.network(
            posts[index].imageUrl ?? '',
            fit: BoxFit.cover,
          ),
        );
      }, childCount: posts.length),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 8.0,
        mainAxisSpacing: 8.0,
        childAspectRatio: 1.0,
      ),
    );
  }
}
